<script setup>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { onMounted } from 'vue'

echarts.use([GridComponent, BarChart, CanvasRenderer])

var chartDom = ref(null)
var option

const userStore = useUserStore()
const user = userStore.user

const data = ref([0, 30, 20, 14, 23, 32, 34])

if (user.id === 1) {
  data.value = [25, 36, 36, 30, 28, 35, 20]
} else if (user.id === 2) {
  data.value = [64, 53, 32, 53, 45, 40, 45]
} else if (user.id === 3) {
  data.value = [25, 0, 23, 15, 18, 23, 15]
}

const startChar = () => {
  const myChart = echarts.init(chartDom.value)
  option = {
    xAxis: {
      type: 'category',
      data: ['前天', '昨天', '今天', '1天后', '2天后', '3天后', '4天后']
    },
    yAxis: {
      max: 100,
      type: 'value'
    },
    grid: {
      top: '5%',
      left: '3%',
      right: '4.8%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        data: data.value,
        //设置每个柱子不同的颜色
        itemStyle: {
          color: function (params) {
            // 根据params的
            const colorsMap = [
              '#4FE773',
              '#4FE773',
              '#4FE773',
              '#CAC8CA',
              '#CAC8CA',
              '#CAC8CA',
              '#CAC8CA'
            ]
            //返回对应的颜色
            return colorsMap[params.dataIndex]
          }
        },
        type: 'bar',
        showBackground: true,
        color: '#4FE773',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  try {
    startChar()
  } catch {
    console.log('图表加载失败')
  }
})
</script>
<template>
  <div v-if="user.name">
    <div ref="chartDom" class="char"></div>
    <div class="footer">
      <!-- 这里放解释 -->
      <ul>
        <li>
          <div></div>
          <span>当天背的单词量</span>
          <span>今天：{{ data[2] }}</span>
        </li>
        <li>
          <div></div>
          <span>AI预测未来每天需要合理背的单词量</span>
        </li>
      </ul>
    </div>
  </div>
  <van-empty v-else description="未登录">
    <van-button
      round
      type="primary"
      @click="$router.push('/login')"
      class="bottom-button"
      >开启升本单词之旅</van-button
    >
  </van-empty>
</template>
<style lang="less" scoped>
.footer ul {
  li {
    margin-top: 1vh;
    margin-left: 2.8vh;
    display: flex;
    align-items: center;
    div {
      width: 2vh;
      height: 2vh;
      background: #4fe773;
    }

    span {
      margin-left: 2vh;
      font-size: 2vh;
    }
  }
  li:nth-child(2) {
    div {
      background: #cac8ca;
    }
  }
}

.footer {
}

.char {
  width: 100%;
  height: 68vh;
  background-color: #fff;

  margin-top: 20px;
}
</style>
